<template>
  <div class="progress">
    <div class="progress-box">
      {{ currentTime | timer(2) }}
      <!-- 进度条 -->
      <div class="progress-wrapper" ref="progress-wrapper">
        <!-- 进度条的容器 -->
        <div class="progress-container" ref="progress-container"></div>
        <!-- dot -->
        <div
          class="dot"
          ref="dot"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
        ></div>
      </div>
      {{ currSong.duration | timer(2) }}
      <!-- 歌曲数据里直接获取总长度 -->
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: ["currentTime"],
  methods: {
    touchstart() {
      // 是否用户操作
      this.touch = true;
      // console.log("手指按下", e.touches[0].pageX);
    },
    touchmove(e) {
      // console.log("手指移动", e.touches[0].pageX);
      this.distance = e.touches[0].pageX - this.wrapperLeft;
      this.move(this.distance);
    },
    touchend() {
      this.touch = false;
      // 手指已经离开
      // console.log("手指抬起", e.touches[0].pageX);
      // 手指抬起调用自定义事件jump 控制歌曲跳转
      // 根据距离计算百分比
      let precent = this.distance / this.wrapperWidth;
      // 根据百分比计算时间
      let time = precent * this.currSong.duration;
      this.$emit("jump", time);
    },
    move(distance) {
      // 边界的判断条件
      if (distance < 0 || distance > this.wrapperWidth) return false;
      // 进度条的移动
      this.container.style.width = distance + "px";
      // 小圆球
      this.dot.style.transform = `translate(${distance}px)`;
    },
  },
  computed: {
    ...mapGetters(["currSong"]),
  },
  filters: {
    timer(data, max) {
      // 将数字转化数组 计算出需要补0的个数
      // let diff = max - String(data).length;
      // 创建一个空数组通过拼接的方式补0
      // console.log("diff", data, diff, new Array(diff + 1).join(0));

      let m = parseInt(data / 60);
      let diffM = new Array(max - String(m).length + 1).join(0);
      let s = parseInt(data % 60);
      let diffS = new Array(max - String(s).length + 1).join(0);
      return `${diffM}${m}:${diffS}${s}`;
    },
  },
  watch: {
    currentTime(newV) {
      // 用户正在拖动 不管监听
      if (this.touch) return false;
      // 监听时间的改变获取播放的百分比
      let precent = newV / this.currSong.duration;
      // console.log("precent", precent);
      // 百分比对应进度条的尺寸
      let w = precent * this.wrapperWidth;
      this.move(w);
    },
  },
  mounted() {
    // 获取进度条容器的宽度
    this.wrapperWidth = this.$refs["progress-wrapper"].clientWidth;
    // getBoundingClientRect 获取元素的位置信息
    this.wrapperLeft =
      this.$refs["progress-wrapper"].getBoundingClientRect().left;
    // 获取进度条内容的dom元素
    this.container = this.$refs["progress-container"];
    // 获取小圆点的dom元素
    this.dot = this.$refs["dot"];
  },
};
/*
1. 显示 开始时间  v
   * 总时间 audio的属性currentTime   duration 父子通信 v
   * 通过filter 处理时间格式  分:秒 v
2. 显示 进度条 v
3. 显示小圆点v
4. 开始时间和进度条随着音乐的播放改变 v
     进度条：获取播放时间与总时间的百分比 * 进度条容器的长度
5. 小圆点随着音乐的播放改变v


6. 用户可以拖动小圆点  
   * 控制进度条和小圆点改变 v
   * 放手控制歌曲的跳转
   * 控制歌词的改变

问题：
  请写一个方法 接受2个参数 第一个参数是数字 第二个参数是长度，如果数字不满足长度实现自动补0操作
  12   3  => 012
  1    4  => 0001
*/
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.progress {
  .w(375);
  .h(30);
  background: red;
  .progress-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .progress-wrapper {
      position: relative;
      .w(300);
      .h(5);
      background: rgba(0, 0, 0, 0.4);
      .progress-container {
        width: 0;
        .h(5);
        background: @font-yellow;
      }
      .dot {
        position: absolute;
        .top(-5);
        .left(-5);
        .w(10);
        .h(10);
        background: @font-yellow;
        border: 3px solid #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
